<template>
    <el-radio-group
                    ref="elRadioGroup"
                    filterable
                    :disabled="disabled"
                    :readonly="readonly"
                    v-model="localValue"
                    v-on:focus="handleFocus($event)"
                    v-on:blur="handleBlur($event)"
                    v-on:change="emitChange"
                    v-on:input="emitInput"
    >
        <template v-for="(item,index) in localData">
            <template v-if="radioType == 'button'">
                <el-radio-button :key="index" :label="$_object_getValue(item,optionProp.value)"
                                 :disabled="item.isDisabled || false"
                >{{$_object_getValue(item,optionProp.label)}}</el-radio-button>
            </template>
            <el-radio v-else :key="index" :label="$_object_getValue(item,optionProp.value)"
                             :disabled="item.isDisabled || false"
            >{{$_object_getValue(item,optionProp.label)}}</el-radio>
        </template>
    </el-radio-group>
</template>

<script>
    import objectMixin from "../../mixin/ObjectMixin"
    export default {
        name: 'RadioGroup',
        mixins:[objectMixin],
        props: {
            value: {
                required: true
            },
            // 数据地址
            url: {
                type: String
            },
            // 可以自定义数据，
            data:{
                type: Array,
                default: function () {
                    return []
                }
            },
            radioType:{
                type: String,
                default: 'radio' // button可选
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            },
            optionProp:{
                type: Object,
                default:function () {
                    return {
                        value: 'id',
                        label: 'name'
                    }
                }
            }
        },
        data () {
            return {
                localValue: this.value,
                localData: this.data
            }
        },
        mounted () {
            this.getDataByUrl(this.url)
        },
        methods: {
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
                this.$emit('selectData', this.getSelectData(val))
            },
            emitInput (val) {
                this.$emit('input', val)
                this.$emit('selectData', this.getSelectData(val))

            },
            getSelectData(val){
                for (let i = 0; i < this.localData.length; i++) {
                    if (val == this.$_object_getValue(this.localData[i], this.optionProp.value)) {
                        return this.localData[i]
                    }
                }
            },
            // 加载
            getDataByUrl (url) {
                if(!url){
                    return
                }
                this.axios.get(url).then(res => {
                    this.localData = res.data

                }).catch(error=>{
                    this.localData = []
                    if(error.response){
                        if(error.response.status != 404){
                            this.$message.error(error.response.data.msg)
                        }
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                })
            },
        },
        watch: {
            value(val){
                this.localValue = val
            },
            url (val){
                this.getDataByUrl(val)
            },
            data (val){
                this.localData = val
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
